<script setup>
import {useRouter} from 'vue-router'
import {ref} from 'vue'

let pagePath = ref("")
const router = useRouter()
function changePage(){
  router.push(pagePath.value)
}

function pathParam(id, language){
  // 两者等价
  // router.push(`/pathParam/${id}/${language}`)
  router.push({path:`/pathParam/${id}/${language}`})
}

function keyValueParam(id_param, language_param){
  // router.push(`/keyValueParam?id=${id}&language=${language}`)
  router.push({path:'/keyValueParam', query:{id:id_param,language:language_param}})
}

</script>

<template>
  <div>
    <h1>这是头</h1>
    <!-- 声明式路由 -->
    <router-link to="/home">home</router-link> <br>
    <router-link to="/list">list</router-link> <br>
    <router-link to="/add">add</router-link> <br>
    <router-link to="/update">update</router-link> <br>
    <!-- 编程式路由 -->
    <button @click="changePage()">更换页面</button> <input type="text" v-model="pagePath"> <br>
    <h2>路由之路径传参</h2>
    <router-link to="/pathParam/1/java">声明式路由传参</router-link> <br>
    <button @click="pathParam(2,'C++')">编程式路由传参</button>

    <h2>路由之键值对传参</h2>
    <router-link to="/keyValueParam?id=1&language=java">声明式键值对传参</router-link> <br>
    <router-link v-bind:to="{path:'/keyValueParam', query:{id:2,language:'c++'}}">声明式键值对传参2</router-link> <br>
    <button @click="keyValueParam(3,'python')">编程式路由传参</button>
    <hr>
    <!-- 该标签会被替换成具体的.vue -->
    <router-view></router-view>
    <hr>
    <h1>这是尾</h1>
  </div>
 
</template> 

<style scoped>

</style>
